<template>
  <div class="group">
    <div class="myChart" ref="dial" v-if="ispage"></div>
    <div class="myChart-data">
      <div class="databox">
        <div class="data-num">
          <span v-if="grouplist.fuelTypes">{{
            myCount(grouplist.fuelTypes["柴油"])
          }}</span>
          <div>
            <i class="little-div1"></i>
            <p>柴油车（辆）</p>
          </div>
        </div>
        <div
          class="data-percentage"
          v-if="grouplist.cyRatio"
          :class="
            grouplist.cyRatio > 0
              ? 'data-percentage-color1'
              : 'data-percentage-color2'
          "
        >
          <span>{{ myCount2(grouplist.cyRatio) }}</span
          ><i></i>
        </div>
      </div>
      <div class="databox">
        <div class="data-num">
          <span v-if="grouplist.fuelTypes">{{
            myCount(grouplist.fuelTypes["天然气"])
          }}</span>
          <div>
            <i class="little-div2"></i>
            <p>天然气（辆）</p>
          </div>
        </div>
        <div
          class="data-percentage"
          v-if="grouplist.trqRatio"
          :class="
            grouplist.trqRatio > 0
              ? 'data-percentage-color1'
              : 'data-percentage-color2'
          "
        >
          <span>{{ myCount2(grouplist.trqRatio) }}</span
          ><i></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "GaugeGroup",
  data() {
    return {};
  },
  props: {
    grouplist: {
      type: Object,
      default: {},
    },
    ispage: {
      type: Boolean,
      default: true,
    },
  },
  computed: {},
  mounted() {},
  methods: {
    drawLine() {
      let myChart = this.$echarts.getInstanceByDom(this.$refs.dial);
      if (myChart == undefined) {
        myChart = this.$echarts.init(this.$refs.dial);
      }
      const Opt = {
        series: [
          {
            type: "gauge",
            radius: "100%",
            center: ["50%", "50%"],
            progress: {
              //进度条
              show: true,
              width: 9,
              itemStyle: {
                color: "#07e7f3",
              },
            },
            // 图表的轴线相关
            axisLine: {
              show: true,
              lineStyle: {
                width: 9,
                color: [[1, "#082469"]],
              },
            },
            axisTick: {
              /*短针*/
              show: false,
            },
            splitLine: {
              /*长针*/
              show: true,
              length: 4,
              distance: 2,
              lineStyle: {
                width: 2,
                color: "#9b9b9c",
              },
            },
            axisLabel: {
              /*长针代表的数字*/
              show: false,
            },
            pointer: {
              /*指针*/
              show: false,
            },
            anchor: {
              /*指针中心点*/
              show: false,
            },
            data: [
              {
                value: this.grouplist.cyPercentage,
                title: {
                  show: false,
                },
                detail: {
                  formatter: "{value|{value}}{split|%}",
                  offsetCenter: [0, "5%"],
                  rich: {
                    value: {
                      color: "#e4f2f3",
                      fontFamily: "微软雅黑",
                      fontSize: 24,
                    },
                    split: {
                      color: "#e4f2f3",
                      fontFamily: "微软雅黑",
                      fontSize: 12,
                    },
                  },
                },
              },
            ],
          },
        ],
      };
      // 绘制图表
      myChart.setOption(Opt);
    },
    myCount(num) {
      // console.log(num)
      return this.myfun.myformat(num);
    },
    myCount2(num) {
      if (num <= 1) {
        num = Math.abs(num);
        return num.toFixed(3) + "%";
      } else {
        return num.toFixed(0) + "%";
      }
    },
  },
  watch: {
    grouplist: {
      // immediate:true,
      deep: true,
      handler(newValue, oldValue) {
        if (newValue.cyPercentage && this.ispage) {
          this.drawLine();
        }
      },
    },
  },
};
</script>

<style scoped lang="scss">
.group {
  box-sizing: border-box;
  .myChart {
    width: 130px;
    height: 130px;
    margin: 0px auto 10px auto;
    color: #e4f2f3;
    background: url(~@/assets/image/circular-bg.png) no-repeat center center;
    background-size: 90px 90px;
  }

  .myChart-data {
    flex: 1;
    box-sizing: border-box;
    padding-left: 15px;
    .databox {
      &:first-child {
        margin-bottom: 20px;
      }
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      .data-num {
        width: 51%;
        span {
          display: block;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 22px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 1;
          color: #f0f6fb;
        }
        div {
          width: 100%;
          margin-top: 6px;
          white-space: nowrap;
          display: flex;
          align-items: center;
          overflow: hidden;
          color: #7983a2;
          font-size: 16px;
          .little-div1 {
            background-color: #07e7f3;
          }
          .little-div2 {
            background-color: #363abe;
          }
          i {
            width: 9px;
            height: 9px;
            margin: 0px 6px 0px 2px;
          }
          p {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin: 0px;
            line-height: 1;
          }
        }
      }
      .data-percentage {
        width: 49%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        span {
          font-size: 24px;
          margin-right: 10px;
        }
        i {
          display: block;
          width: 0px;
          height: 0px;
          opacity: 0.3;
          border-style: solid;
          border-color: transparent;
          border-width: 7px;
        }
      }
      .data-percentage-color1 {
        span {
          color: #e9b015;
        }
        i {
          border-bottom-color: #e9b015;
          margin-top: -21px;
          border-bottom-width: 14px;
        }
      }
      .data-percentage-color2 {
        span {
          color: #14d6c1;
        }
        i {
          border-top-color: #07e7f3;
          margin-top: 14px;
          border-top-width: 14px;
        }
      }
    }
  }
}
</style>
